<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">商城</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="index_a">
				<view class="header_wrap">
					<view class="header_wrap_a">
						<u-icon name="search" color="#fff" size="16"></u-icon>
					</view>
					<view class="header_wrap_b">
						<input  placeholder="搜索商品" v-model="keyword" placeholder-style="font-size: 24rpx;font-family: PingFang SC;font-weight: 500;color: #BBBBBB;"/>
					</view>
					<view class="header_wrap_c">搜索</view>
				</view>
			</view>
			<view class="index_b">
				<u-swiper
						:list="goods_banner"
						keyName="image"
						indicator
						indicatorMode="line"
						circular
						radius='0'
						height='400rpx'
						@click="ad_click1"
				></u-swiper>
			</view>
			<view class="l_bg">
				<view class="bor_jb">
					<view class="l_cen">
						<view class="l_top">
							<view class="l_bottom">
								<view class="index_b_d_aaa">
									<u-tabs
										ref="tabs" 
										:current="current" 
										@click="tabsChange" 
										lineColor="#CC8FBD"
										:activeStyle="{
												fontSize: '28rpx',
												fontFamily: 'PingFang SC',
												fontWeight: '800',
												color: '#fff'
												}"
										:inactiveStyle="{
												fontSize: '28rpx',
												fontFamily: 'PingFang SC',
												color: '#fff'
												}"
										itemStyle="padding-left:20rpx; padding-right:20rpx; height: 80rpx;"
										:list="goodscategory_list" 
										:is-scroll="false"
										>
									</u-tabs>
								</view>
								<view class="index_e">
									<GoodsList :list="goodsList" is_type="1"></GoodsList>
								</view>
								<loading-footer :status="status" :slot-empty="true">
									<view slot="empty" class="column-center" style="padding-top: 200rpx">
										<image class="img-null" src="/static/goods_null.png"></image>
										<text class="lighter">暂无记录</text>
									</view>
								</loading-footer>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="cart_num_a" @click="goPage('/pages/cart/list')" :style="'background-image:url('+gwc_fd+');'">
			<view class="cart_num_a_a">{{cart_num}}</view>
		</view>
	</view>
</template>
<script>
import request from '@/common/request.js';
import {
	loadingType,
	trottle,
	paramsToStr
} from '@/utils/type';
export default {
	data() {
		return {
			showLoading:true,
			gwc_fd:request.baseUrl_img+'/img/gwc_fd.png',
			value1:1,
			current:0,
			uid:0,
			goods_banner:[],
			first_category_id:0,
			goodsList:[],
			goodscategory_list:[],
			status: loadingType.LOADING,
			page: 1,
			limit:8,
			cart_num:0,
		}
	},
	onShareAppMessage(res) { //发送给朋友
		return {
			title:'爱物生',
			path:'/pages/home/vendor'
		}
	},
	onShareTimeline(res) {//分享到朋友圈
		return {
			title:'爱物生',
			path:'/pages/home/vendor'
		}
	},
	onShow() {
		this.uid=uni.getStorageSync('uid');
		if(this.uid){
			this.getCartNumFun();
		}
	},
	onReachBottom: function() {
		this.getGoodsListFun();
	},
	mounted() {
		this.home_config_post();
		this.onRefresh();
	},
	methods: {
		goPage(url) {
			uni.navigateTo({
				url
			});
		},
		getCartNumFun(){
			let paramsList = {
				'uid':this.uid
			}
			let optsList = {
				url: 'c-cart_num',
				method: 'post'
			};
			let _this=this;
			request.httpRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					_this.cart_num=res.data.data.num;
				}
			});
		},
		ad_click1(e){
			let item=this.goods_banner[e];
			this.ad_click(item);
		},
		ad_click(item){
			console.log(item);
			let {
				link,
				link_type,
				params,
				is_tab
			} = item;
			switch (link_type) {
				case 1:
					""
				case 2:
					if (is_tab) {
						uni.switchTab({
							url: link
						});
					} else {
						uni.navigateTo({
							url: link + paramsToStr(params)
						});
					}
					break;
				case 3:
					uni.navigateTo({
						url: '/pages/webview/webview?url=' + link
					});
					break;
			}
		},
		tabsChange(e) {
			this.current = e.index;
			this.first_category_id = e.id;
			this.onRefresh();
		},
		home_config_post(){
			let paramsList = {
				
			}
			let optsList = {
				url: 'p-public_config',
				method: 'post'
			};
			let _this=this;
			request.httpRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					_this.goods_banner=res.data.data.goods_banner;
					_this.goodscategory_list=res.data.data.goodscategory_list;
					_this.first_category_id =_this.goodscategory_list[0].id;
				}
			});
		},
		async getGoodsListFun() {
			let {
				page,
				limit,
				goodsList,
				first_category_id,
				status
			} = this;
			if (status == loadingType.FINISHED) return;
			const paramsList = {
				page: page,
				size:limit,
				category_id:first_category_id,
				uid:this.uid,
			}
			let optsList = {
				url: 'g-goodslist',
				method: 'post'
			};
			request.httpRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					if(page == 1) goodsList = []
					let {
						list,
						more
					} = res.data.data
					this.goodsList.push(...list)
					this.page = ++page
					if (!more) {
						this.status = loadingType.FINISHED
					}
					if (this.goodsList.length <= 0) {
						this.status = loadingType.EMPTY
					}
				} else {
					this.status = loadingType.ERROR
				}
				this.showLoading=false;
			});
		},
		onRefresh() {
			this.page = 1
			this.goodsList = []
			this.status = loadingType.LOADING
			this.$nextTick(() => {
				this.getGoodsListFun();
			});
		}
	}
}
</script>

<style  lang="scss" scoped>
	.cart_num_a{
		width: 100rpx;
		height: 100rpx;
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size:100rpx;
		z-index: 1;
	}
	.cart_num_a_a{
		width: 54rpx;
		height: 40rpx;
		background: #CC8FBD;
		border-radius: 20rpx;
		position: absolute;
		top:-20rpx;
		right:-20rpx;
		text-align: center;
		line-height: 35rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color:#FFFFFF;
	}
	.l_bg{
		width: 750rpx;
		margin-top: 40rpx;
	}
	.index_a{
		height: auto;
		width: 700rpx;
		overflow: hidden;
		padding: 25rpx;
		margin: auto;
	}
	.header_wrap{
		width: 100%;
		height: 72rpx;
		border-radius: 34rpx;
		background-color:#2B2030;
	}
	.header_wrap_a{
		width: 40rpx;
		height: 40rpx;
		float: left;
		margin-top: 17rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}
	.header_wrap_b{
		width: 430rpx;
		height: 68rpx;
		float: left;
	}
	.header_wrap_b input{
		width: 430rpx;
		height: 68rpx;
		line-height: 68rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;
	}
	.header_wrap_c{
		width: 145rpx;
		height: 68rpx;
		background:#62469B;
		border-radius: 29rpx;
		float: right;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 68rpx;
		text-align: center;
	}
	.index_b{
		width: 700rpx;
		height: 400rpx;
		margin: auto;
	}
	.index_e{
		overflow: hidden;
	}
	.index_b_d_aaa{
		width: 750rpx;
		overflow: hidden;
		padding:25rpx;
	}
</style>
